<template>
  <div>
    <!-- 搜索栏 -->
    <el-card id="search">
      <el-row>
        <el-button type="primary" round icon="el-icon-refresh" @click="fresh">刷新</el-button>
      </el-row>
    </el-card>

    <!-- 渲染列表 -->
    <el-card>
      <el-card v-if="count == 0">暂无订单</el-card>
      <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
      <el-card v-for="item in goodsList" v-if="item.goodsBuyer === name && item.goodsFlag === 1" :key="item.goodsId" class="goods">
        <div v-if="item.goodsMessage === '换购成功'">
          <el-tag style="float: left; margin-right: 10px;" type="warning">换购订单</el-tag>
          <!-- <img class="cart-img" :src="item.goodsImg" alt=""> -->
          <el-tag>你的物品名称:{{ item.goodsExchange }}</el-tag>
          <el-tag>交易对象:{{ item.goodsOwner }}</el-tag>
          <el-tag>对方物品名称:{{ item.goodsName }}</el-tag>
          <el-button type="warning" style="float: right;" @click="deleteGoods2(item.goodsId,item.goodsExchange)">取消换购订单</el-button>
          <el-button type="danger" style="float: right; margin-right: 10px;" @click="complain(item.goodsOwner)">举报对方</el-button>
        </div>
        <div v-else-if="item.goodsMessage === '已付款'">
          <!-- <img class="cart-img" :src="item.goodsImg" alt=""> -->
          <el-tag style="float: left; margin-right: 10px;" type="warning">购买订单</el-tag>
          <el-tag>物品Id:{{ item.goodsId }}</el-tag>
          <el-tag>物品名称:{{ item.goodsName }}</el-tag>
          <el-tag>发布者:{{ item.goodsOwner }}</el-tag>
          <el-tag>价格:{{ item.goodsPrice.toFixed (2) }} * {{ item.goodsCount }}</el-tag>
          <el-tag>已购数量:{{ item.goodsCount }}</el-tag>
          <el-tag>已付金额:{{ (item.goodsPrice * item.goodsCount).toFixed (2) }}元</el-tag>
          <el-button type="warning" style="float: right;" @click="deleteGoods(item.goodsId)">取消购买订单</el-button>
          <el-button type="danger" style="float: right; margin-right: 10px;" @click="complain(item.goodsOwner)">举报发布者</el-button>
          <el-button type="primary" style="float: right;" @click="chat(item.goodsId,item.goodsOwner)">用户沟通</el-button>
        </div>
      </el-card>
      <el-card>
        总花销: {{ priceSum.toFixed (2) }}元
      </el-card>
    </el-card>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import cartApi from '@/api/cartManage'
import goodsApi from '@/api/goodsManage'
import userApi from '@/api/userManage'
import userRoleApi from '@/api/userRoleManage'
export default {
  data() {
    return {
      cartList: [],
      goodsList: [],
      goodsForm: {},
      goodsId: 0,
      userList: [],
      userId: 0,
      exchangeGoodsForm: {},
      userRoleList: [],
      userRoleListSave: [],
      formLabelWidth: '130px',
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 5
      },
      priceSum: 0,
      count: 0
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getAllCart()
    this.getAllGoods()
    this.getAllUserRole()
  },
  methods: {
    fresh() {
      setTimeout(this.getAllCart, 50)
      setTimeout(this.getAllGoods, 50)
    },
    chat(goodsId, goodsOwner) {
      this.$confirm(`您确认与该用户进行沟通吗 ?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userApi.getUserIdByUsername(goodsOwner).then(response => {
          this.userId = response.data
          goodsApi.getGoodsById(goodsId).then(response => {
            this.goodsForm = response.data
            console.log(this.goodsForm)
            this.$set(this.goodsForm, 'chatFlag', 1)
            goodsApi.updateGoods(this.goodsForm)
          })
          const routeData = this.$router.resolve({ path: '../shopping/chat', query: { userId: this.userId, goodsId: goodsId }})
          window.open(routeData.href, '_blank')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消沟通'
        })
      })
    },
    complain(goodsOwner) {
      goodsApi.getUserListInfoByOwner(goodsOwner).then(response => {
        this.userList = response.data
        userRoleApi.getUserRoleListByUserId(this.userList[0].id).then(response => {
          this.userRoleList = response.data
          console.log(this.userRoleList[0])
          this.userRoleListSave = this.userRoleList[0]
        })
      })
      this.$prompt('请输入您举报的原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '限制字数30以内'
      }).then(({ value }) => {
        if (value.length > 30) {
          this.$message({
            type: 'info',
            message: '超出限制字数30'
          })
        } else {
          goodsApi.getUserListInfoByOwner(goodsOwner).then(response => {
            this.userList = response.data
            this.$message({
              type: 'success',
              message: '举报成功，请在消息中心耐心等待审核结果！'
            })
            this.$set(this.userList[0], 'cause', value)
            this.$set(this.userList[0], 'complain', 1)
            this.$set(this.userList[0], 'complainer', this.name)
            this.$set(this.userList[0], 'message', '审核中')
            // 更新用户表，但是权限被删除
            userApi.updateUser(this.userList[0]).then(response => {
            // 插入一条数据
              userRoleApi.addUserRole(this.userRoleListSave)
            })
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消举报'
        })
      })
    },
    deleteGoods(id) {
      this.$confirm(`您确认取消该订单吗 ?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        goodsApi.getGoodsById(id).then(response => {
          this.$set(response.data, 'goodsFlag', 0)
          this.$set(response.data, 'goodsExchange', '无')
          this.$set(response.data, 'goodsBuyer', '暂无')
          this.$set(response.data, 'goodsCount', 0)
          this.$set(response.data, 'goodsMessage', '订单已被取消')
          this.$set(response.data, 'chatMsg', '')
          this.$set(response.data, 'chatCount', 1)
          this.$set(response.data, 'chatFlag', 0)
          goodsApi.updateGoods(response.data).then(response => {
          })
        })
        cartApi.deleteCartById(id).then(response => {
          this.$message({
            type: 'success',
            message: '已删除订单成功!'
          })
          setTimeout(this.getAllCart, 50)
          setTimeout(this.getAllGoods, 50)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除订单'
        })
      })
    },
    deleteGoods2(id, OwnerGoodsName) {
      this.$confirm(`您确认取消该订单吗 ?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        goodsApi.getGoodsById(id).then(response => {
          this.$set(response.data, 'goodsFlag', 0)
          this.$set(response.data, 'goodsExchange', '无')
          this.$set(response.data, 'goodsBuyer', '暂无')
          this.$set(response.data, 'goodsCount', 0)
          this.$set(response.data, 'goodsMessage', '订单已被取消')
          this.$set(response.data, 'chatMsg', '')
          this.$set(response.data, 'chatCount', 1)
          this.$set(response.data, 'chatFlag', 0)
          goodsApi.updateGoods(response.data).then(response => {
          })
        })
        // 获取对方物品Id
        goodsApi.getGoodsIdByGoodsName(OwnerGoodsName).then(response => {
          this.goodsId = response.data
          console.log(this.goodsId)
          goodsApi.getGoodsById(this.goodsId).then(response => {
            this.$set(response.data, 'goodsFlag', 0)
            this.$set(response.data, 'goodsExchange', '无')
            this.$set(response.data, 'goodsBuyer', '暂无')
            this.$set(response.data, 'goodsCount', 0)
            this.$set(response.data, 'goodsMessage', '订单已被取消')
            this.$set(response.data, 'chatMsg', '')
            this.$set(response.data, 'chatCount', 1)
            goodsApi.updateGoods(response.data).then(response => {
            })
          })
        })
        cartApi.deleteCartById(id).then(response => {
          this.$message({
            type: 'success',
            message: '已删除订单成功!'
          })
          setTimeout(this.getAllCart, 50)
          setTimeout(this.getAllGoods, 50)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除订单'
        })
      })
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize
      this.getAllCart()
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo
      this.getAllCart()
    },
    getAllCart() {
      cartApi.getAllCart().then(response => {
        this.cartList = response.data
        this.priceSum = 0
        this.count = 0
        for (let i = 0; i < this.cartList.length; i++) {
          if (this.cartList[i].goodsBuyer === this.name && this.cartList[i].goodsFlag === 1) {
            this.count += 1
            this.priceSum += this.cartList[i].goodsPrice * this.cartList[i].goodsCount
          }
        }
      })
    },
    getAllGoods() {
      goodsApi.getAllGoods().then(response => {
        this.goodsList = response.data
      })
    },
    getAllUserRole() {
      userRoleApi.getAllUserRoleList().then(response => {
        this.userRoleList = response.data
      })
    }
  }
}
</script>

<style scoped>
.el-card .cart-img{
  height: 30px;
}
.el-tag{
  margin-left: 10px;
}

</style>
